import { observer } from "mobx-react";
import { Radio, message } from 'antd';
import { toJS } from 'mobx';
import D3Tree from '../../common/tree/RectTree';
import { TaskViewPageType } from "../../../constants/task";
import { ViewUrl } from "../../../constants/excel";
import routes from "../../../constants/route";
import API from '../../../apis/task';
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TaskViewPath extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div className="edc-task-view-path">
                <div className="tree-layout-toggle d3-tree-toggle">
                    <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@0fb0b5`} value={store.layout} onChange={this.changeLayout}>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@6ekna4`} value="0">{getLabel('502277','左') }</Radio.Button>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@ox5ox3`} value="2">{getLabel('502278','右') }</Radio.Button>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@y5p49p`} value="1">{getLabel('502279','上') }</Radio.Button>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@idpyic`} value="3">{getLabel('502280','下') }</Radio.Button>
                    </Radio.Group>
                </div>
                <D3Tree ecId={`${this && this.props && this.props.ecId || ''}_D3Tree@7vca1c`}
                    data={toJS(store.node)}
                    onClickTitle={this.openNode}
                    layout={store.layout}
                    showRight={false}
                    showname={this.getShowname}
                    desc="submitDate"
                    showMenu={true}
                    onReject={ store.task.hasRejectBtn && store.reject}
                    onBatchReject={store.task.hasBatchRejectBtn && store.batchReject}
                    nameTitle={getLabel('506148','点击查看数据')}
                    showOperator={true}
                    showHreflink={true}
                    nodeid={store.nodeid}
                    isSplit={store.isPathSplit}
                />
            </div>
        )
    }
    getShowname = (d) => {
        return `${d.name}`;
    }
    changeLayout = (e) => {
        const { store } = this.props;
        store.changeLayout(e.target.value);
    }

    openNode = (d) => {
        const { hreflinkObj = [], formData = '' } = d || {};
        const [type, hreflink, pageid] = hreflinkObj;
        if (type === TaskViewPageType.EXCEL && pageid) {
            if(!formData) {
                message.warn(getLabel('511551','该节点没有上传数据，无法查看！'));
                return;
            }
            window.open(`#/${routes.excelView}?nodeid=${d.id}&pageid=${pageid}&dataid=${formData}`)
            //window.open(`${ViewUrl}#/${routes.excelView}?pageid=${pageid}&dataid=${formData}`);
        } else if (type === TaskViewPageType.FORM && pageid && formData) {
            window.open(`${ViewUrl}#/${routes.form}/${pageid}?dataid=${formData}`);
        }

    }
}